<template>
    <div class="center-flex">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <p class="center-text">科泰头条后台管理系统</p>
            </div>
            <div class="baiodan">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="^用户名" prop="name">
                        <el-input v-model="ruleForm.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="^密码" prop="password">
                        <el-input v-model="ruleForm.password" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :plain="true" @click="submitForm('ruleForm')"
                            class="den">登录</el-button>
                        <el-button @click="resetForm('ruleForm')"  class="quxiao">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                flg: false
            },
            rules: {
                name: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min: 3, max: 10, message: '用户名长度在 3 到10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'change' },
                    {
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                // 这里处理密码为空的情况，如果密码已经通过 required 验证，则这里可以不处理
                                callback(new Error('密码不能为空'));
                                return;
                            }
                            const reg = /^[A-Za-z0-9_]{6,}$/; // 正则表达式，6位以上数字、字母和下划线的组合
                            if (!reg.test(value)) {
                                callback(new Error('密码必须为6位以上数字、字母和下划线的组合'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    },
                ],
                // 你可以添加更多的表单项规则   
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.flg = true
                    this.$message('登陆成功');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}

.center-flex {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    display: flex;
}

.anliou {
    align-items: center;
}

.center-text {
    text-align: left;
}

.den {
margin-right: 100px;
}
</style>